<template>
  <view class="page">
    <view class="page-ctx">
      <view class="sec-box type-wrap">
        <view class="sec-title">反馈类型</view>
        <view class="type-box">
          <view class="type-list">
            <view
              class="type-item"
              v-for="(item, index) in cateList"
              :key="index"
              @click="chooseItem(item, index)">
              <view class="icon-box">
                <image
                  v-if="cateSelect == item"
                  src="@/static/image/check.png"
                  mode=""></image>
                <image v-else src="@/static/image/check0.png" mode=""></image>
              </view>
              <view class="text">
                {{ item }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="sec-box content-wrap">
        <view class="sec-title">反馈与建议</view>
        <view class="textarea-box">
          <!-- <textarea v-model="content" maxlength=-1 placeholder="请您写出对平台的反馈及意见" placeholder-class="textarea-place" /> -->
          <u--textarea
            height="120"
            v-model="content"
            maxlength="100"
            placeholder="请您写出对平台的反馈及意见"
            count
            placeholder-class="textarea-p"></u--textarea>
        </view>
        <view class="upload-box">
          <view class="upload-list">
            <view
              class="upload-item"
              v-for="(pic, index) in uploadImages"
              :key="index"
              @click="doPreview(pic)">
              <view
                class="remore-box flex-center"
                @click.stop="doRemove(pic, index)">
                <image
                  class="upload-remove"
                  src="@/static/feedback/remove.png"
                  mode=""></image>
              </view>
              <view class="poster-box">
                <image
                  class="upload-image"
                  :src="pic"
                  mode="aspectFill"></image>
              </view>
            </view>
            <view
              class="upload-item"
              @click="uploadImagesClick()"
              v-if="uploadImages.length < 6">
              <image
                class="upload-icon"
                src="@/static/image/upload.png"
                mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="page-foot">
      <view class="safe-fixed-bottom btns">
        <button class="btn flex-center" @click="doSubmit()">
          提交意见反馈
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import util from "@/plugin/util.js";

export default {
  data() {
    return {
      cateList: [],
      cateSelect: "",
      content: "",
      uploadImages: [],
      placeholderStyle: {
        color: "#7D7D7D",
        "font-size": "24rpx",
      },
      allowUploadNumber: 6,
    };
  },
  onLoad() {
    this.setView();
  },
  methods: {
    setView() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "index_config",
        },
      }).then((res) => {
        if (res.code == 200) {
          // this.cateList = res.data.feed_type
          let data = res.data;
          let feedType = JSON.parse(data.feedType);
          this.cateList = feedType.map((v) => v.title);
        }
      });
    },
    doSubmit() {
      if (!this.cateSelect) {
        return this.$alert("请选择反馈类型");
      }
      if (!this.content) {
        return this.$alert("请填写反馈内容");
      }
      // let type_title = this.cateList[this.cateSelect]

      this.mix_throttle(this.doSubmitFn);
    },

    doSubmitFn() {
      let params = {
        // type_title: type_title,
        feedType: this.cateSelect,
        content: this.content,
        images: this.uploadImages.join(","),
      };

      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "feedback_add",
          ...params,
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.toBack({
            time: 500,
          });
        }
      });
    },

    chooseItem(title, id, index) {
      console.warn("title", title);
      console.warn("id", id);
      console.warn("index", index);
      this.cateSelect = title;
    },

    // 上传
    doPreview(pic) {
      uni.previewImage({
        urls: [pic],
      });
    },
    uploadImagesClick() {
      this.uploadImagesFn();
      // let count = this.allowUploadNumber - this.uploadImages.length
      // if (count > 0) {
      // 	util.handleUploadImage({
      // 		count: count,
      // 		data: {

      // 		},
      // 		successCallback: (res) => {
      // 			this.$logjson('上传回调', res)
      // 			let pic = res.data;
      // 			this.uploadImages.push(pic)
      // 		}
      // 	});
      // }
    },
    // 上传图片
    uploadImagesFn() {
      // #ifdef H5
      this.do_h5_upload();
      // #endif

      // #ifndef H5
      this.do_mp_upload();
      // #endif
    },

    // H5环境上传图片
    do_h5_upload() {
      let count = this.allowUploadNumber - this.uploadImages.length;
      uni.chooseImage({
        count: count || 1,
        mediaType: ["image"], // 图片// ['image', 'video']
        sourceType: ["album", "camera"], // 从相册选择
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.warn("选择图片 success", res);

          // tempFilePaths  路径列表
          // tempFiles			文件列表
          res.tempFiles.forEach((file) => {
            this.$apiUpload({
              url: "/service.php",
              method: "post",
              data: {
                action: "index_localUpload",
                img: file.path,
                if_touxiang: 0,
              },
            }).then((res) => {
              if (res.code == 200) {
                let pic = res.data;
                this.uploadImages.push(pic);
              }
            });
          });
        },
      });
    },

    // 小程序环境上传图片
    do_mp_upload() {
      console.log("dianjile111");
      let count = this.allowUploadNumber - this.uploadImages.length;
      uni.chooseMedia({
        count: count || 1,
        mediaType: ["image"], // 图片// ['image', 'video']
        sourceType: ["album", "camera"], // 从相册选择
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.warn("选择图片 success", res);

          // tempFilePaths  路径列表
          // tempFiles			文件列表 【{tempFilePath: '临时路径'}】
          res.tempFiles.forEach((file) => {
            this.$apiUpload({
              url: "/service.php",
              method: "post",
              data: {
                action: "index_localUpload",
                img: file.tempFilePath,
                // if_touxiang: 0,
              },
            }).then((res) => {
              if (res.code == 200) {
                let pic = res.data;
                this.uploadImages.push(pic);
              }
            });
          });
        },
      });
    },

    doRemove(pic, index) {
      this.uploadImages.splice(index, 1);
    },
    // 上传
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.page {
}

.page-ctx {
  padding: 24rpx 32rpx;
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

.sec-box {
  margin-bottom: 16rpx;
  width: 100%;
  padding: 24rpx;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;

  .sec-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }
}

.type-box {
  margin-top: 24rpx;

  .type-list {
    display: flex;
    flex-wrap: wrap;

    .type-item {
      margin-top: 24rpx;
      margin-right: 26rpx;
      display: inline-flex;
      align-items: center;

      .icon-box {
        width: 28rpx;
        height: 28rpx;

        image {
          width: 28rpx;
          height: 28rpx;
        }
      }

      .text {
        margin-left: 16rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}

.content-wrap {
  .textarea-box {
    margin-top: 20rpx;

    textarea {
      overflow: hidden;
      background: #ffffff;
      background: #f8f8f8;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      border: 1rpx solid #dddddd;

      padding: 30rpx 20rpx;
      display: block;
      width: 100%;
      min-height: 280rpx;

      border-radius: 12rpx 12rpx 12rpx 12rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }

    .textarea-p {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }

    /deep/.u-textarea {
      background: #f8f8f8;
      border-radius: 4rpx 4rpx 4rpx 4rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }

    /deep/.u-textarea__count {
      background-color: #f6fafd !important;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }

    .input-placeholder {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #7d7d7d;
    }
  }
}

.upload-box {
  margin-top: 34rpx;

  .upload-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .upload-item {
      margin-bottom: 24rpx;
      margin-right: 16rpx;
      position: relative;
      width: 202rpx;
      height: 202rpx;
      background: #f6fafd;
      background: #fff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .upload-icon {
        width: 100%;
        height: 100%;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }

      .poster-box {
        width: 100%;
        height: 100%;

        .upload-image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
        }
      }

      .remore-box {
        position: absolute;
        z-index: 10;
        right: -20rpx;
        top: -20rpx;
        width: 60rpx;
        height: 60rpx;

        .upload-remove {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
}

.page-foot {
  .btns {
    width: 100%;

    .btn {
      width: 100%;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;

      &[disabled] {
        background: #dddddd;
      }
    }
  }
}
</style>
